<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Yo Documentation 动画</title>
    <link rel="stylesheet" href="source/app.css"/>
    <link rel="stylesheet" href="source/highlight.min.css">
    <style>
    #readme {
      margin-top: .2rem;
    }

    #readme .markdown-body h1:nth-of-type(1) {
      display: none;
    }

    #index .docs-nav .navbar-brand.index {
      color: #555;
    }

    #index .docs-header {
      padding: 1.2rem 0;
      text-align: center;
    }

    #index .docs-header .container > h1 {
      margin-bottom: 20px;
      font-size: .8rem;
    }

    #index .docs-header .container > p {
      width: auto;
      margin-right: 0;
    }

    #index .docs-header .container > a {
      display: inline-block;
      margin-top: .2rem;
      padding: 0.1rem 0.4rem;
      border: 1px solid;
      border-radius: 0.05rem;
      -webkit-background-clip: padding-box !important;
      -moz-background-clip: padding-box !important;
      -ms-background-clip: padding-box !important;
      background-clip: padding-box !important;
      color: #9dd8fc;
      font-size: .2rem;
      font-weight: bold;
    }

    #index .docs-header .container > .version {
      display: block;
      margin-top: .15rem;
      color: #89CDD6;
      font-size: .16rem;
    }

    #index .docs-header .container > a:hover {
      text-decoration: none;
      border-color: #9dd8fc;
      background-color: rgba(157, 216, 252, 0.6);
      color: #fff;
    }

    @media (min-width: 1200px) {
      #index .docs-header .container > p {
        padding: 0 1rem;
        font-size: .28rem;
      }
    }

    @media (min-width: 992px) and (max-width: 1199px) {
      #index .docs-header .container > p {
        padding: 0 0.6rem;
        font-size: .25rem;
      }
    }

    @media (min-width: 768px) and (max-width: 991px) {
      #index .docs-header .container > p {
        padding: 0 0.3rem;
        font-size: .21rem;
      }
    }

    @media (max-width: 767px) {
      #index .docs-header .container > p {
        padding: 0 0.2rem;
        font-size: .2rem;
      }
    }

    #index .markdown-body {
      text-align: center;
    }

    #index .markdown-body > h2 {
      margin-top: .8rem !important;
      border: none;
      font-size: .35rem;
    }

    #index .markdown-body > p {
      width: 80%;
      margin: auto;
      color: #666;
      font-size: .24rem;
    }

    @media (max-width: 767px) {
      #index .markdown-body > h2 {
        font-size: .28rem;
      }
      #index .markdown-body > p {
        font-size: .18rem;
      }
    }

    #index .markdown-body ul {
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-box;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -moz-box-pack: center;
      -moz-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-flex-wrap: wrap;
      -moz-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      padding: 0;
      list-style: none;
    }

    #index .markdown-body ul > li {
      overflow: hidden;
      width: 200px;
      height: 200px;
      margin: 20px 10px 0;
      border: 1px solid #eee;
      border-radius: 0.05rem;
      -webkit-background-clip: padding-box !important;
      -moz-background-clip: padding-box !important;
      -ms-background-clip: padding-box !important;
      background-clip: padding-box !important;
    }

    #index .markdown-body ul > li:hover > p:not(:only-child):first-child {
      margin-top: -198px;
    }

    #index .markdown-body ul p {
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-box;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -moz-box-pack: center;
      -moz-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -moz-box-align: center;
      -moz-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      width: 100%;
      height: 100%;
      -webkit-transition: margin-top 0.3s ease-in;
      -moz-transition: margin-top 0.3s ease-in;
      -ms-transition: margin-top 0.3s ease-in;
      transition: margin-top 0.3s ease-in;
      margin: 0;
    }

    #index .markdown-body ul p:not(:only-child):last-child {
      padding: .15rem;
      background-color: #eee;
    }

    #index .markdown-body ul img {
      max-width: 100%;
      max-height: 100%;
    }
    </style>
</head>
<body id="animate">
<a id="skippy" class="sr-only sr-only-focusable" href="#content"><div class="container"><span class="skiplink-text">Skip to main content</span></div></a>


<!-- Docs master nav -->
<header class="navbar navbar-static-top docs-nav" id="top" role="banner">
    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#bs-navbar" aria-controls="bs-navbar" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="./index.html" class="navbar-brand">Yo</a>
        </div>
        <nav id="bs-navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-left">
                
                
                
                
                
                <li class="">
                    <a href="getting-started.html">起步</a>
                </li>
                
                
                
                
                
                <li class="">
                    <a href="core.html">核心</a>
                </li>
                
                
                
                
                
                <li class="">
                    <a href="element.html">元件</a>
                </li>
                
                
                
                
                
                <li class="active">
                    <a href="animate.html">动画</a>
                </li>
                
                
                
                
                
                <li class="">
                    <a href="changelog.html">版本</a>
                </li>
                
                
                
                
                
                <li>
                    <a href="http://doyoe.github.io/Yo/demo/" target="_blank">示例</a>
                </li>
                
                
                
                
                
                <li>
                    <a href="https://github.com/doyoe/Yo" target="_blank">Github</a>
                </li>
                
                
                
            </ul>
        </nav>
    </div>
</header>

<!-- Docs page layout -->

<div class="docs-header" id="content">
    <div class="container">
        <h1>动画</h1>
        <p>详细介绍 Yo 的动画</p>
        <a href="https://github.com/doyoe/Yo/tree/"></a>
        
    </div>
</div>



<div class="container docs-container">
    
    
    <div class="row">
        <div class="col-md-9 markdown-body" role="main">
            
            <div class="docs-section">
    
    <h1 id="elastic" class="page-header">elastic</h1>
    
    <blockquote class="api">
        <h3 id="elastic-in-down">
            elastic-in-down
        </h3>
    </blockquote>
    <p>
        <small class="text-muted">描述:</small>
        定义弹性下落动画
    </p>
    
    
    <p>
        <small class="text-muted">源码位置:</small>
        <a href="./static/lib/ani/elastic-in-down.scss.html#3" target="_blank">./lib/ani/elastic-in-down.scss:3</a>
    </p>
    
    
    <p>
        <small class="text-muted">Demo地址:</small>
        <a href="http://ued.qunar.com/mobile/yo/demo/animate/ani-text.html" target="_blank">点击访问</a>
    </p>
    
    
    
    <p>
        <small class="text-muted">示例:</small>
    </p>
    <p class="code">
        <code>&lt;div class="ani elastic-in-down"&gt;该元素将会被应用elastic-in-down动画&lt;/div&gt;</code>
    </p>
    
    
    <blockquote class="api">
        <h3 id="elastic-in-left">
            elastic-in-left
        </h3>
    </blockquote>
    <p>
        <small class="text-muted">描述:</small>
        定义从左侧弹性进入动画
    </p>
    
    
    <p>
        <small class="text-muted">源码位置:</small>
        <a href="./static/lib/ani/elastic-in-left.scss.html#3" target="_blank">./lib/ani/elastic-in-left.scss:3</a>
    </p>
    
    
    
    
    
    <blockquote class="api">
        <h3 id="elastic-in-right">
            elastic-in-right
        </h3>
    </blockquote>
    <p>
        <small class="text-muted">描述:</small>
        定义从右侧弹性进入动画
    </p>
    
    
    <p>
        <small class="text-muted">源码位置:</small>
        <a href="./static/lib/ani/elastic-in-right.scss.html#3" target="_blank">./lib/ani/elastic-in-right.scss:3</a>
    </p>
    
    
    
    
    
    <blockquote class="api">
        <h3 id="elastic-in-up">
            elastic-in-up
        </h3>
    </blockquote>
    <p>
        <small class="text-muted">描述:</small>
        定义弹性升起动画
    </p>
    
    
    <p>
        <small class="text-muted">源码位置:</small>
        <a href="./static/lib/ani/elastic-in-up.scss.html#3" target="_blank">./lib/ani/elastic-in-up.scss:3</a>
    </p>
    
    
    
    
    
    <blockquote class="api">
        <h3 id="elastic-in">
            elastic-in
        </h3>
    </blockquote>
    <p>
        <small class="text-muted">描述:</small>
        定义弹性进入动画
    </p>
    
    
    <p>
        <small class="text-muted">源码位置:</small>
        <a href="./static/lib/ani/elastic-in.scss.html#3" target="_blank">./lib/ani/elastic-in.scss:3</a>
    </p>
    
    
    
    
    
    <blockquote class="api">
        <h3 id="elastic-out-down">
            elastic-out-down
        </h3>
    </blockquote>
    <p>
        <small class="text-muted">描述:</small>
        定义弹性向下移出动画
    </p>
    
    
    <p>
        <small class="text-muted">源码位置:</small>
        <a href="./static/lib/ani/elastic-out-down.scss.html#3" target="_blank">./lib/ani/elastic-out-down.scss:3</a>
    </p>
    
    
    
    
    
    <blockquote class="api">
        <h3 id="elastic-out-left">
            elastic-out-left
        </h3>
    </blockquote>
    <p>
        <small class="text-muted">描述:</small>
        定义弹性向左移出动画
    </p>
    
    
    <p>
        <small class="text-muted">源码位置:</small>
        <a href="./static/lib/ani/elastic-out-left.scss.html#3" target="_blank">./lib/ani/elastic-out-left.scss:3</a>
    </p>
    
    
    
    
    
    <blockquote class="api">
        <h3 id="elastic-out-right">
            elastic-out-right
        </h3>
    </blockquote>
    <p>
        <small class="text-muted">描述:</small>
        定义弹性向右移出动画
    </p>
    
    
    <p>
        <small class="text-muted">源码位置:</small>
        <a href="./static/lib/ani/elastic-out-right.scss.html#3" target="_blank">./lib/ani/elastic-out-right.scss:3</a>
    </p>
    
    
    
    
    
    <blockquote class="api">
        <h3 id="elastic-out-up">
            elastic-out-up
        </h3>
    </blockquote>
    <p>
        <small class="text-muted">描述:</small>
        定义弹性向上移出动画
    </p>
    
    
    <p>
        <small class="text-muted">源码位置:</small>
        <a href="./static/lib/ani/elastic-out-up.scss.html#3" target="_blank">./lib/ani/elastic-out-up.scss:3</a>
    </p>
    
    
    
    
    
    <blockquote class="api">
        <h3 id="elastic-out">
            elastic-out
        </h3>
    </blockquote>
    <p>
        <small class="text-muted">描述:</small>
        定义弹性移出动画
    </p>
    
    
    <p>
        <small class="text-muted">源码位置:</small>
        <a href="./static/lib/ani/elastic-out.scss.html#3" target="_blank">./lib/ani/elastic-out.scss:3</a>
    </p>
    
    
    
    
    
    <blockquote class="api">
        <h3 id="elastic-x">
            elastic-x
        </h3>
    </blockquote>
    <p>
        <small class="text-muted">描述:</small>
        定义X轴弹性动画
    </p>
    
    
    <p>
        <small class="text-muted">源码位置:</small>
        <a href="./static/lib/ani/elastic-x.scss.html#3" target="_blank">./lib/ani/elastic-x.scss:3</a>
    </p>
    
    
    
    
    
    <blockquote class="api">
        <h3 id="elastic-y">
            elastic-y
        </h3>
    </blockquote>
    <p>
        <small class="text-muted">描述:</small>
        定义Y轴弹性动画
    </p>
    
    
    <p>
        <small class="text-muted">源码位置:</small>
        <a href="./static/lib/ani/elastic-y.scss.html#3" target="_blank">./lib/ani/elastic-y.scss:3</a>
    </p>
    
    
    
    
    
    
    <h1 id="other" class="page-header">other</h1>
    
    <blockquote class="api">
        <h3 id="extrusion">
            extrusion
        </h3>
    </blockquote>
    <p>
        <small class="text-muted">描述:</small>
        定义橡皮圈挤压回弹动画
    </p>
    
    
    <p>
        <small class="text-muted">源码位置:</small>
        <a href="./static/lib/ani/extrusion.scss.html#3" target="_blank">./lib/ani/extrusion.scss:3</a>
    </p>
    
    
    
    
    
    <blockquote class="api">
        <h3 id="flash">
            flash
        </h3>
    </blockquote>
    <p>
        <small class="text-muted">描述:</small>
        定义闪烁动画
    </p>
    
    
    <p>
        <small class="text-muted">源码位置:</small>
        <a href="./static/lib/ani/flash.scss.html#3" target="_blank">./lib/ani/flash.scss:3</a>
    </p>
    
    
    
    
    
    <blockquote class="api">
        <h3 id="hinge">
            hinge
        </h3>
    </blockquote>
    <p>
        <small class="text-muted">描述:</small>
        定义悬挂动画
    </p>
    
    
    <p>
        <small class="text-muted">源码位置:</small>
        <a href="./static/lib/ani/hinge.scss.html#3" target="_blank">./lib/ani/hinge.scss:3</a>
    </p>
    
    
    
    
    
    <blockquote class="api">
        <h3 id="pulse">
            pulse
        </h3>
    </blockquote>
    <p>
        <small class="text-muted">描述:</small>
        定义脉冲动画
    </p>
    
    
    <p>
        <small class="text-muted">源码位置:</small>
        <a href="./static/lib/ani/pulse.scss.html#3" target="_blank">./lib/ani/pulse.scss:3</a>
    </p>
    
    
    
    
    
    <blockquote class="api">
        <h3 id="shake">
            shake
        </h3>
    </blockquote>
    <p>
        <small class="text-muted">描述:</small>
        定义摇动动画
    </p>
    
    
    <p>
        <small class="text-muted">源码位置:</small>
        <a href="./static/lib/ani/shake.scss.html#3" target="_blank">./lib/ani/shake.scss:3</a>
    </p>
    
    
    
    
    
    <blockquote class="api">
        <h3 id="sling">
            sling
        </h3>
    </blockquote>
    <p>
        <small class="text-muted">描述:</small>
        定义吊索动画
    </p>
    
    
    <p>
        <small class="text-muted">源码位置:</small>
        <a href="./static/lib/ani/sling.scss.html#3" target="_blank">./lib/ani/sling.scss:3</a>
    </p>
    
    
    
    
    
    <blockquote class="api">
        <h3 id="stretch">
            stretch
        </h3>
    </blockquote>
    <p>
        <small class="text-muted">描述:</small>
        定义橡皮圈拉伸回弹动画
    </p>
    
    
    <p>
        <small class="text-muted">源码位置:</small>
        <a href="./static/lib/ani/stretch.scss.html#3" target="_blank">./lib/ani/stretch.scss:3</a>
    </p>
    
    
    
    
    
    <blockquote class="api">
        <h3 id="swing">
            swing
        </h3>
    </blockquote>
    <p>
        <small class="text-muted">描述:</small>
        定义晃动动画
    </p>
    
    
    <p>
        <small class="text-muted">源码位置:</small>
        <a href="./static/lib/ani/swing.scss.html#3" target="_blank">./lib/ani/swing.scss:3</a>
    </p>
    
    
    
    
    
    <blockquote class="api">
        <h3 id="wobble">
            wobble
        </h3>
    </blockquote>
    <p>
        <small class="text-muted">描述:</small>
        定义摆动动画
    </p>
    
    
    <p>
        <small class="text-muted">源码位置:</small>
        <a href="./static/lib/ani/wobble.scss.html#3" target="_blank">./lib/ani/wobble.scss:3</a>
    </p>
    
    
    
    
    
    
    <h1 id="fade" class="page-header">fade</h1>
    
    <blockquote class="api">
        <h3 id="fade-in-down">
            fade-in-down
        </h3>
    </blockquote>
    <p>
        <small class="text-muted">描述:</small>
        定义淡入落下动画
    </p>
    
    
    <p>
        <small class="text-muted">源码位置:</small>
        <a href="./static/lib/ani/fade-in-down.scss.html#3" target="_blank">./lib/ani/fade-in-down.scss:3</a>
    </p>
    
    
    
    
    
    <blockquote class="api">
        <h3 id="fade-in-left">
            fade-in-left
        </h3>
    </blockquote>
    <p>
        <small class="text-muted">描述:</small>
        定义从左侧淡入动画
    </p>
    
    
    <p>
        <small class="text-muted">源码位置:</small>
        <a href="./static/lib/ani/fade-in-left.scss.html#3" target="_blank">./lib/ani/fade-in-left.scss:3</a>
    </p>
    
    
    
    
    
    <blockquote class="api">
        <h3 id="fade-in-right">
            fade-in-right
        </h3>
    </blockquote>
    <p>
        <small class="text-muted">描述:</small>
        定义从右侧淡入动画
    </p>
    
    
    <p>
        <small class="text-muted">源码位置:</small>
        <a href="./static/lib/ani/fade-in-right.scss.html#3" target="_blank">./lib/ani/fade-in-right.scss:3</a>
    </p>
    
    
    
    
    
    <blockquote class="api">
        <h3 id="fade-in-up">
            fade-in-up
        </h3>
    </blockquote>
    <p>
        <small class="text-muted">描述:</small>
        定义淡入升起动画
    </p>
    
    
    <p>
        <small class="text-muted">源码位置:</small>
        <a href="./static/lib/ani/fade-in-up.scss.html#3" target="_blank">./lib/ani/fade-in-up.scss:3</a>
    </p>
    
    
    
    
    
    <blockquote class="api">
        <h3 id="fade-in">
            fade-in
        </h3>
    </blockquote>
    <p>
        <small class="text-muted">描述:</small>
        定义淡入动画
    </p>
    
    
    <p>
        <small class="text-muted">源码位置:</small>
        <a href="./static/lib/ani/fade-in.scss.html#3" target="_blank">./lib/ani/fade-in.scss:3</a>
    </p>
    
    
    
    
    
    <blockquote class="api">
        <h3 id="fade-out-down">
            fade-out-down
        </h3>
    </blockquote>
    <p>
        <small class="text-muted">描述:</small>
        定义从下面淡出动画
    </p>
    
    
    <p>
        <small class="text-muted">源码位置:</small>
        <a href="./static/lib/ani/fade-out-down.scss.html#3" target="_blank">./lib/ani/fade-out-down.scss:3</a>
    </p>
    
    
    
    
    
    <blockquote class="api">
        <h3 id="fade-out-left">
            fade-out-left
        </h3>
    </blockquote>
    <p>
        <small class="text-muted">描述:</small>
        定义从左侧淡出动画
    </p>
    
    
    <p>
        <small class="text-muted">源码位置:</small>
        <a href="./static/lib/ani/fade-out-left.scss.html#3" target="_blank">./lib/ani/fade-out-left.scss:3</a>
    </p>
    
    
    
    
    
    <blockquote class="api">
        <h3 id="fade-out-right">
            fade-out-right
        </h3>
    </blockquote>
    <p>
        <small class="text-muted">描述:</small>
        定义从右侧淡出动画
    </p>
    
    
    <p>
        <small class="text-muted">源码位置:</small>
        <a href="./static/lib/ani/fade-out-right.scss.html#3" target="_blank">./lib/ani/fade-out-right.scss:3</a>
    </p>
    
    
    
    
    
    <blockquote class="api">
        <h3 id="fade-out-up">
            fade-out-up
        </h3>
    </blockquote>
    <p>
        <small class="text-muted">描述:</small>
        定义从上面淡出动画
    </p>
    
    
    <p>
        <small class="text-muted">源码位置:</small>
        <a href="./static/lib/ani/fade-out-up.scss.html#3" target="_blank">./lib/ani/fade-out-up.scss:3</a>
    </p>
    
    
    
    
    
    <blockquote class="api">
        <h3 id="fade-out">
            fade-out
        </h3>
    </blockquote>
    <p>
        <small class="text-muted">描述:</small>
        定义淡出动画
    </p>
    
    
    <p>
        <small class="text-muted">源码位置:</small>
        <a href="./static/lib/ani/fade-out.scss.html#3" target="_blank">./lib/ani/fade-out.scss:3</a>
    </p>
    
    
    
    
    
    
    <h1 id="flip" class="page-header">flip</h1>
    
    <blockquote class="api">
        <h3 id="flip-in-x">
            flip-in-x
        </h3>
    </blockquote>
    <p>
        <small class="text-muted">描述:</small>
        定义翻转动画
    </p>
    
    
    <p>
        <small class="text-muted">源码位置:</small>
        <a href="./static/lib/ani/flip-in-x.scss.html#3" target="_blank">./lib/ani/flip-in-x.scss:3</a>
    </p>
    
    
    
    
    
    <blockquote class="api">
        <h3 id="flip-in-y">
            flip-in-y
        </h3>
    </blockquote>
    <p>
        <small class="text-muted">描述:</small>
        定义翻转动画
    </p>
    
    
    <p>
        <small class="text-muted">源码位置:</small>
        <a href="./static/lib/ani/flip-in-y.scss.html#3" target="_blank">./lib/ani/flip-in-y.scss:3</a>
    </p>
    
    
    
    
    
    <blockquote class="api">
        <h3 id="flip-out-x">
            flip-out-x
        </h3>
    </blockquote>
    <p>
        <small class="text-muted">描述:</small>
        定义翻转动画
    </p>
    
    
    <p>
        <small class="text-muted">源码位置:</small>
        <a href="./static/lib/ani/flip-out-x.scss.html#3" target="_blank">./lib/ani/flip-out-x.scss:3</a>
    </p>
    
    
    
    
    
    <blockquote class="api">
        <h3 id="flip-out-y">
            flip-out-y
        </h3>
    </blockquote>
    <p>
        <small class="text-muted">描述:</small>
        定义翻转动画
    </p>
    
    
    <p>
        <small class="text-muted">源码位置:</small>
        <a href="./static/lib/ani/flip-out-y.scss.html#3" target="_blank">./lib/ani/flip-out-y.scss:3</a>
    </p>
    
    
    
    
    
    <blockquote class="api">
        <h3 id="flip">
            flip
        </h3>
    </blockquote>
    <p>
        <small class="text-muted">描述:</small>
        定义翻转动画
    </p>
    
    
    <p>
        <small class="text-muted">源码位置:</small>
        <a href="./static/lib/ani/flip.scss.html#3" target="_blank">./lib/ani/flip.scss:3</a>
    </p>
    
    
    
    
    
    
    <h1 id="roll" class="page-header">roll</h1>
    
    <blockquote class="api">
        <h3 id="roll-in-left">
            roll-in-left
        </h3>
    </blockquote>
    <p>
        <small class="text-muted">描述:</small>
        定义从左侧翻滚进入动画
    </p>
    
    
    <p>
        <small class="text-muted">源码位置:</small>
        <a href="./static/lib/ani/roll-in-left.scss.html#3" target="_blank">./lib/ani/roll-in-left.scss:3</a>
    </p>
    
    
    
    
    
    <blockquote class="api">
        <h3 id="roll-in-righ">
            roll-in-righ
        </h3>
    </blockquote>
    <p>
        <small class="text-muted">描述:</small>
        定义从右侧翻滚进入动画
    </p>
    
    
    <p>
        <small class="text-muted">源码位置:</small>
        <a href="./static/lib/ani/roll-in-right.scss.html#3" target="_blank">./lib/ani/roll-in-right.scss:3</a>
    </p>
    
    
    
    
    
    <blockquote class="api">
        <h3 id="roll-out-left">
            roll-out-left
        </h3>
    </blockquote>
    <p>
        <small class="text-muted">描述:</small>
        定义从左侧翻滚出去动画
    </p>
    
    
    <p>
        <small class="text-muted">源码位置:</small>
        <a href="./static/lib/ani/roll-out-left.scss.html#3" target="_blank">./lib/ani/roll-out-left.scss:3</a>
    </p>
    
    
    
    
    
    <blockquote class="api">
        <h3 id="roll-out-right">
            roll-out-right
        </h3>
    </blockquote>
    <p>
        <small class="text-muted">描述:</small>
        定义从右侧翻滚出去动画
    </p>
    
    
    <p>
        <small class="text-muted">源码位置:</small>
        <a href="./static/lib/ani/roll-out-right.scss.html#3" target="_blank">./lib/ani/roll-out-right.scss:3</a>
    </p>
    
    
    
    
    
    
    <h1 id="rotate" class="page-header">rotate</h1>
    
    <blockquote class="api">
        <h3 id="rotate-in-down-left">
            rotate-in-down-left
        </h3>
    </blockquote>
    <p>
        <small class="text-muted">描述:</small>
        定义旋转从左向下进入动画
    </p>
    
    
    <p>
        <small class="text-muted">源码位置:</small>
        <a href="./static/lib/ani/rotate-in-down-left.scss.html#3" target="_blank">./lib/ani/rotate-in-down-left.scss:3</a>
    </p>
    
    
    
    
    
    <blockquote class="api">
        <h3 id="rotate-in-down-right">
            rotate-in-down-right
        </h3>
    </blockquote>
    <p>
        <small class="text-muted">描述:</small>
        定义旋转从右向下进入动画
    </p>
    
    
    <p>
        <small class="text-muted">源码位置:</small>
        <a href="./static/lib/ani/rotate-in-down-right.scss.html#3" target="_blank">./lib/ani/rotate-in-down-right.scss:3</a>
    </p>
    
    
    
    
    
    <blockquote class="api">
        <h3 id="rotate-in-up-left">
            rotate-in-up-left
        </h3>
    </blockquote>
    <p>
        <small class="text-muted">描述:</small>
        定义旋转从左向上进入动画
    </p>
    
    
    <p>
        <small class="text-muted">源码位置:</small>
        <a href="./static/lib/ani/rotate-in-up-left.scss.html#3" target="_blank">./lib/ani/rotate-in-up-left.scss:3</a>
    </p>
    
    
    
    
    
    <blockquote class="api">
        <h3 id="rotate-in-up-right">
            rotate-in-up-right
        </h3>
    </blockquote>
    <p>
        <small class="text-muted">描述:</small>
        定义旋转从右向上进入动画
    </p>
    
    
    <p>
        <small class="text-muted">源码位置:</small>
        <a href="./static/lib/ani/rotate-in-up-right.scss.html#3" target="_blank">./lib/ani/rotate-in-up-right.scss:3</a>
    </p>
    
    
    
    
    
    <blockquote class="api">
        <h3 id="rotate-in">
            rotate-in
        </h3>
    </blockquote>
    <p>
        <small class="text-muted">描述:</small>
        定义旋转进入动画
    </p>
    
    
    <p>
        <small class="text-muted">源码位置:</small>
        <a href="./static/lib/ani/rotate-in.scss.html#3" target="_blank">./lib/ani/rotate-in.scss:3</a>
    </p>
    
    
    
    
    
    <blockquote class="api">
        <h3 id="rotate-out-down-left">
            rotate-out-down-left
        </h3>
    </blockquote>
    <p>
        <small class="text-muted">描述:</small>
        定义旋转从左往下退出动画
    </p>
    
    
    <p>
        <small class="text-muted">源码位置:</small>
        <a href="./static/lib/ani/rotate-out-down-left.scss.html#3" target="_blank">./lib/ani/rotate-out-down-left.scss:3</a>
    </p>
    
    
    
    
    
    <blockquote class="api">
        <h3 id="rotate-out-down-right">
            rotate-out-down-right
        </h3>
    </blockquote>
    <p>
        <small class="text-muted">描述:</small>
        定义旋转从右往下退出动画
    </p>
    
    
    <p>
        <small class="text-muted">源码位置:</small>
        <a href="./static/lib/ani/rotate-out-down-right.scss.html#3" target="_blank">./lib/ani/rotate-out-down-right.scss:3</a>
    </p>
    
    
    
    
    
    <blockquote class="api">
        <h3 id="rotate-out-up-left">
            rotate-out-up-left
        </h3>
    </blockquote>
    <p>
        <small class="text-muted">描述:</small>
        定义旋转从左向上退出动画
    </p>
    
    
    <p>
        <small class="text-muted">源码位置:</small>
        <a href="./static/lib/ani/rotate-out-up-left.scss.html#3" target="_blank">./lib/ani/rotate-out-up-left.scss:3</a>
    </p>
    
    
    
    
    
    <blockquote class="api">
        <h3 id="rotate-out-up-right">
            rotate-out-up-right
        </h3>
    </blockquote>
    <p>
        <small class="text-muted">描述:</small>
        定义旋转从右向上退出动画
    </p>
    
    
    <p>
        <small class="text-muted">源码位置:</small>
        <a href="./static/lib/ani/rotate-out-up-right.scss.html#3" target="_blank">./lib/ani/rotate-out-up-right.scss:3</a>
    </p>
    
    
    
    
    
    <blockquote class="api">
        <h3 id="rotate-out">
            rotate-out
        </h3>
    </blockquote>
    <p>
        <small class="text-muted">描述:</small>
        定义旋转退出动画
    </p>
    
    
    <p>
        <small class="text-muted">源码位置:</small>
        <a href="./static/lib/ani/rotate-out.scss.html#3" target="_blank">./lib/ani/rotate-out.scss:3</a>
    </p>
    
    
    
    
    
    <blockquote class="api">
        <h3 id="rotate">
            rotate
        </h3>
    </blockquote>
    <p>
        <small class="text-muted">描述:</small>
        定义旋转动画
    </p>
    
    
    <p>
        <small class="text-muted">源码位置:</small>
        <a href="./static/lib/ani/rotate.scss.html#3" target="_blank">./lib/ani/rotate.scss:3</a>
    </p>
    
    
    
    
    
    
    <h1 id="speed" class="page-header">speed</h1>
    
    <blockquote class="api">
        <h3 id="speed-in-left">
            speed-in-left
        </h3>
    </blockquote>
    <p>
        <small class="text-muted">描述:</small>
        定义从左侧快速进入动画
    </p>
    
    
    <p>
        <small class="text-muted">源码位置:</small>
        <a href="./static/lib/ani/speed-in-left.scss.html#3" target="_blank">./lib/ani/speed-in-left.scss:3</a>
    </p>
    
    
    
    
    
    <blockquote class="api">
        <h3 id="speed-in-right">
            speed-in-right
        </h3>
    </blockquote>
    <p>
        <small class="text-muted">描述:</small>
        定义从右侧快速进入动画
    </p>
    
    
    <p>
        <small class="text-muted">源码位置:</small>
        <a href="./static/lib/ani/speed-in-right.scss.html#3" target="_blank">./lib/ani/speed-in-right.scss:3</a>
    </p>
    
    
    
    
    
    <blockquote class="api">
        <h3 id="speed-out-left">
            speed-out-left
        </h3>
    </blockquote>
    <p>
        <small class="text-muted">描述:</small>
        定义从左侧快速出去动画
    </p>
    
    
    <p>
        <small class="text-muted">源码位置:</small>
        <a href="./static/lib/ani/speed-out-left.scss.html#3" target="_blank">./lib/ani/speed-out-left.scss:3</a>
    </p>
    
    
    
    
    
    <blockquote class="api">
        <h3 id="speed-out-right">
            speed-out-right
        </h3>
    </blockquote>
    <p>
        <small class="text-muted">描述:</small>
        定义从右侧快速出去动画
    </p>
    
    
    <p>
        <small class="text-muted">源码位置:</small>
        <a href="./static/lib/ani/speed-out-right.scss.html#3" target="_blank">./lib/ani/speed-out-right.scss:3</a>
    </p>
    
    
    
    
    
    <blockquote class="api">
        <h3 id="speed-in-left">
            speed-in-left
        </h3>
    </blockquote>
    <p>
        <small class="text-muted">描述:</small>
        定义从左侧放大进入动画
    </p>
    
    
    <p>
        <small class="text-muted">源码位置:</small>
        <a href="./static/lib/ani/zoom-in-left.scss.html#3" target="_blank">./lib/ani/zoom-in-left.scss:3</a>
    </p>
    
    
    
    
    
    
    <h1 id="zoom" class="page-header">zoom</h1>
    
    <blockquote class="api">
        <h3 id="zoom-in-down">
            zoom-in-down
        </h3>
    </blockquote>
    <p>
        <small class="text-muted">描述:</small>
        定义放大下降进入动画
    </p>
    
    
    <p>
        <small class="text-muted">源码位置:</small>
        <a href="./static/lib/ani/zoom-in-down.scss.html#3" target="_blank">./lib/ani/zoom-in-down.scss:3</a>
    </p>
    
    
    
    
    
    <blockquote class="api">
        <h3 id="zoom-in-right">
            zoom-in-right
        </h3>
    </blockquote>
    <p>
        <small class="text-muted">描述:</small>
        定义从右侧放大进入动画
    </p>
    
    
    <p>
        <small class="text-muted">源码位置:</small>
        <a href="./static/lib/ani/zoom-in-right.scss.html#3" target="_blank">./lib/ani/zoom-in-right.scss:3</a>
    </p>
    
    
    
    
    
    <blockquote class="api">
        <h3 id="zoom-in-up">
            zoom-in-up
        </h3>
    </blockquote>
    <p>
        <small class="text-muted">描述:</small>
        定义放大上升进入动画
    </p>
    
    
    <p>
        <small class="text-muted">源码位置:</small>
        <a href="./static/lib/ani/zoom-in-up.scss.html#3" target="_blank">./lib/ani/zoom-in-up.scss:3</a>
    </p>
    
    
    
    
    
    <blockquote class="api">
        <h3 id="zoom-in">
            zoom-in
        </h3>
    </blockquote>
    <p>
        <small class="text-muted">描述:</small>
        定义放大进入动画
    </p>
    
    
    <p>
        <small class="text-muted">源码位置:</small>
        <a href="./static/lib/ani/zoom-in.scss.html#3" target="_blank">./lib/ani/zoom-in.scss:3</a>
    </p>
    
    
    
    
    
    <blockquote class="api">
        <h3 id="zoom-out-down">
            zoom-out-down
        </h3>
    </blockquote>
    <p>
        <small class="text-muted">描述:</small>
        定义下降缩小退出动画
    </p>
    
    
    <p>
        <small class="text-muted">源码位置:</small>
        <a href="./static/lib/ani/zoom-out-down.scss.html#3" target="_blank">./lib/ani/zoom-out-down.scss:3</a>
    </p>
    
    
    
    
    
    <blockquote class="api">
        <h3 id="zoom-out-left">
            zoom-out-left
        </h3>
    </blockquote>
    <p>
        <small class="text-muted">描述:</small>
        定义从左往右缩小退出动画
    </p>
    
    
    <p>
        <small class="text-muted">源码位置:</small>
        <a href="./static/lib/ani/zoom-out-left.scss.html#3" target="_blank">./lib/ani/zoom-out-left.scss:3</a>
    </p>
    
    
    
    
    
    <blockquote class="api">
        <h3 id="zoom-out-right">
            zoom-out-right
        </h3>
    </blockquote>
    <p>
        <small class="text-muted">描述:</small>
        定义从右往左缩小退出动画
    </p>
    
    
    <p>
        <small class="text-muted">源码位置:</small>
        <a href="./static/lib/ani/zoom-out-right.scss.html#3" target="_blank">./lib/ani/zoom-out-right.scss:3</a>
    </p>
    
    
    
    
    
    <blockquote class="api">
        <h3 id="zoom-out-up">
            zoom-out-up
        </h3>
    </blockquote>
    <p>
        <small class="text-muted">描述:</small>
        定义上升缩小退出动画
    </p>
    
    
    <p>
        <small class="text-muted">源码位置:</small>
        <a href="./static/lib/ani/zoom-out-up.scss.html#3" target="_blank">./lib/ani/zoom-out-up.scss:3</a>
    </p>
    
    
    
    
    
    <blockquote class="api">
        <h3 id="zoom-out">
            zoom-out
        </h3>
    </blockquote>
    <p>
        <small class="text-muted">描述:</small>
        定义缩小退出动画
    </p>
    
    
    <p>
        <small class="text-muted">源码位置:</small>
        <a href="./static/lib/ani/zoom-out.scss.html#3" target="_blank">./lib/ani/zoom-out.scss:3</a>
    </p>
    
    
    
    
    
    
</div>

        </div>
        <div class="col-md-3" role="complementary">
            <nav class="docs-sidebar hidden-print hidden-xs hidden-sm" style="overflow:scroll">
                <ul class="nav docs-sidenav">
                    
                    
                    <li>
                        <a href="elastic" >elastic</a>
                    </li>
                    
                    
                    
                    
                    <ul class="nav" style="display:block">
                    
                        <li>
                            <a href="#elastic-in-down">elastic-in-down</a>
                        </li>
                    
                    
                    
                    
                    
                        <li>
                            <a href="#elastic-in-left">elastic-in-left</a>
                        </li>
                    
                    
                    
                    
                    
                        <li>
                            <a href="#elastic-in-right">elastic-in-right</a>
                        </li>
                    
                    
                    
                    
                    
                        <li>
                            <a href="#elastic-in-up">elastic-in-up</a>
                        </li>
                    
                    
                    
                    
                    
                        <li>
                            <a href="#elastic-in">elastic-in</a>
                        </li>
                    
                    
                    
                    
                    
                        <li>
                            <a href="#elastic-out-down">elastic-out-down</a>
                        </li>
                    
                    
                    
                    
                    
                        <li>
                            <a href="#elastic-out-left">elastic-out-left</a>
                        </li>
                    
                    
                    
                    
                    
                        <li>
                            <a href="#elastic-out-right">elastic-out-right</a>
                        </li>
                    
                    
                    
                    
                    
                        <li>
                            <a href="#elastic-out-up">elastic-out-up</a>
                        </li>
                    
                    
                    
                    
                    
                        <li>
                            <a href="#elastic-out">elastic-out</a>
                        </li>
                    
                    
                    
                    
                    
                        <li>
                            <a href="#elastic-x">elastic-x</a>
                        </li>
                    
                    
                    
                    
                    
                        <li>
                            <a href="#elastic-y">elastic-y</a>
                        </li>
                    
                    </ul>
                    
                    
                    
                    
                    <li>
                        <a href="other" >other</a>
                    </li>
                    
                    
                    
                    
                    <ul class="nav" style="display:block">
                    
                        <li>
                            <a href="#extrusion">extrusion</a>
                        </li>
                    
                    
                    
                    
                    
                        <li>
                            <a href="#flash">flash</a>
                        </li>
                    
                    
                    
                    
                    
                        <li>
                            <a href="#hinge">hinge</a>
                        </li>
                    
                    
                    
                    
                    
                        <li>
                            <a href="#pulse">pulse</a>
                        </li>
                    
                    
                    
                    
                    
                        <li>
                            <a href="#shake">shake</a>
                        </li>
                    
                    
                    
                    
                    
                        <li>
                            <a href="#sling">sling</a>
                        </li>
                    
                    
                    
                    
                    
                        <li>
                            <a href="#stretch">stretch</a>
                        </li>
                    
                    
                    
                    
                    
                        <li>
                            <a href="#swing">swing</a>
                        </li>
                    
                    
                    
                    
                    
                        <li>
                            <a href="#wobble">wobble</a>
                        </li>
                    
                    </ul>
                    
                    
                    
                    
                    <li>
                        <a href="fade" >fade</a>
                    </li>
                    
                    
                    
                    
                    <ul class="nav" style="display:block">
                    
                        <li>
                            <a href="#fade-in-down">fade-in-down</a>
                        </li>
                    
                    
                    
                    
                    
                        <li>
                            <a href="#fade-in-left">fade-in-left</a>
                        </li>
                    
                    
                    
                    
                    
                        <li>
                            <a href="#fade-in-right">fade-in-right</a>
                        </li>
                    
                    
                    
                    
                    
                        <li>
                            <a href="#fade-in-up">fade-in-up</a>
                        </li>
                    
                    
                    
                    
                    
                        <li>
                            <a href="#fade-in">fade-in</a>
                        </li>
                    
                    
                    
                    
                    
                        <li>
                            <a href="#fade-out-down">fade-out-down</a>
                        </li>
                    
                    
                    
                    
                    
                        <li>
                            <a href="#fade-out-left">fade-out-left</a>
                        </li>
                    
                    
                    
                    
                    
                        <li>
                            <a href="#fade-out-right">fade-out-right</a>
                        </li>
                    
                    
                    
                    
                    
                        <li>
                            <a href="#fade-out-up">fade-out-up</a>
                        </li>
                    
                    
                    
                    
                    
                        <li>
                            <a href="#fade-out">fade-out</a>
                        </li>
                    
                    </ul>
                    
                    
                    
                    
                    <li>
                        <a href="flip" >flip</a>
                    </li>
                    
                    
                    
                    
                    <ul class="nav" style="display:block">
                    
                        <li>
                            <a href="#flip-in-x">flip-in-x</a>
                        </li>
                    
                    
                    
                    
                    
                        <li>
                            <a href="#flip-in-y">flip-in-y</a>
                        </li>
                    
                    
                    
                    
                    
                        <li>
                            <a href="#flip-out-x">flip-out-x</a>
                        </li>
                    
                    
                    
                    
                    
                        <li>
                            <a href="#flip-out-y">flip-out-y</a>
                        </li>
                    
                    
                    
                    
                    
                        <li>
                            <a href="#flip">flip</a>
                        </li>
                    
                    </ul>
                    
                    
                    
                    
                    <li>
                        <a href="roll" >roll</a>
                    </li>
                    
                    
                    
                    
                    <ul class="nav" style="display:block">
                    
                        <li>
                            <a href="#roll-in-left">roll-in-left</a>
                        </li>
                    
                    
                    
                    
                    
                        <li>
                            <a href="#roll-in-righ">roll-in-righ</a>
                        </li>
                    
                    
                    
                    
                    
                        <li>
                            <a href="#roll-out-left">roll-out-left</a>
                        </li>
                    
                    
                    
                    
                    
                        <li>
                            <a href="#roll-out-right">roll-out-right</a>
                        </li>
                    
                    </ul>
                    
                    
                    
                    
                    <li>
                        <a href="rotate" >rotate</a>
                    </li>
                    
                    
                    
                    
                    <ul class="nav" style="display:block">
                    
                        <li>
                            <a href="#rotate-in-down-left">rotate-in-down-left</a>
                        </li>
                    
                    
                    
                    
                    
                        <li>
                            <a href="#rotate-in-down-right">rotate-in-down-right</a>
                        </li>
                    
                    
                    
                    
                    
                        <li>
                            <a href="#rotate-in-up-left">rotate-in-up-left</a>
                        </li>
                    
                    
                    
                    
                    
                        <li>
                            <a href="#rotate-in-up-right">rotate-in-up-right</a>
                        </li>
                    
                    
                    
                    
                    
                        <li>
                            <a href="#rotate-in">rotate-in</a>
                        </li>
                    
                    
                    
                    
                    
                        <li>
                            <a href="#rotate-out-down-left">rotate-out-down-left</a>
                        </li>
                    
                    
                    
                    
                    
                        <li>
                            <a href="#rotate-out-down-right">rotate-out-down-right</a>
                        </li>
                    
                    
                    
                    
                    
                        <li>
                            <a href="#rotate-out-up-left">rotate-out-up-left</a>
                        </li>
                    
                    
                    
                    
                    
                        <li>
                            <a href="#rotate-out-up-right">rotate-out-up-right</a>
                        </li>
                    
                    
                    
                    
                    
                        <li>
                            <a href="#rotate-out">rotate-out</a>
                        </li>
                    
                    
                    
                    
                    
                        <li>
                            <a href="#rotate">rotate</a>
                        </li>
                    
                    </ul>
                    
                    
                    
                    
                    <li>
                        <a href="speed" >speed</a>
                    </li>
                    
                    
                    
                    
                    <ul class="nav" style="display:block">
                    
                        <li>
                            <a href="#speed-in-left">speed-in-left</a>
                        </li>
                    
                    
                    
                    
                    
                        <li>
                            <a href="#speed-in-right">speed-in-right</a>
                        </li>
                    
                    
                    
                    
                    
                        <li>
                            <a href="#speed-out-left">speed-out-left</a>
                        </li>
                    
                    
                    
                    
                    
                        <li>
                            <a href="#speed-out-right">speed-out-right</a>
                        </li>
                    
                    
                    
                    
                    
                        <li>
                            <a href="#speed-in-left">speed-in-left</a>
                        </li>
                    
                    </ul>
                    
                    
                    
                    
                    <li>
                        <a href="zoom" >zoom</a>
                    </li>
                    
                    
                    
                    
                    <ul class="nav" style="display:block">
                    
                        <li>
                            <a href="#zoom-in-down">zoom-in-down</a>
                        </li>
                    
                    
                    
                    
                    
                        <li>
                            <a href="#zoom-in-right">zoom-in-right</a>
                        </li>
                    
                    
                    
                    
                    
                        <li>
                            <a href="#zoom-in-up">zoom-in-up</a>
                        </li>
                    
                    
                    
                    
                    
                        <li>
                            <a href="#zoom-in">zoom-in</a>
                        </li>
                    
                    
                    
                    
                    
                        <li>
                            <a href="#zoom-out-down">zoom-out-down</a>
                        </li>
                    
                    
                    
                    
                    
                        <li>
                            <a href="#zoom-out-left">zoom-out-left</a>
                        </li>
                    
                    
                    
                    
                    
                        <li>
                            <a href="#zoom-out-right">zoom-out-right</a>
                        </li>
                    
                    
                    
                    
                    
                        <li>
                            <a href="#zoom-out-up">zoom-out-up</a>
                        </li>
                    
                    
                    
                    
                    
                        <li>
                            <a href="#zoom-out">zoom-out</a>
                        </li>
                    
                    
                    
                </ul>
            </nav>
        </div>
    </div>
    
    
</div>

<!-- Footer
================================================== -->
<footer class="docs-footer" role="contentinfo">
    <div class="container">
        <p>Made By Doyoe.com © 2014 - 2016</p>
    </div>
</footer>

<script src="source/jquery.min.js"></script>
<script src="source/bootstrap.min.js"></script>
<script src="source/docs.min.js"></script>
<script src="source/highlight.min.js"></script>
<script>
    $(document).ready(function() {
        $('code').each(function(i, block) {
            if (block.innerHTML.indexOf('\n') != -1) {
                var pn = block.parentNode;
                if (pn.tagName.toUpperCase() == 'PRE') {
                    try {
                        hljs.highlightBlock(block);
                    } catch(e) {}
                } else {
                    pn.innerHTML = '<pre><code>' + block.innerHTML + '</code></pre>';
                    try {
                        hljs.highlightBlock(pn.childNodes[0].childNodes[0]);
                    } catch(e) {}
                }
            }
        });

        var winHeight = $(window).height() - 40;

        $('.docs-sidebar').height(winHeight);

        var activeMenu,
            sidebar = $('.docs-sidebar'),
            barScroll = false;

        sidebar.on('mouseover', function() {
            barScroll = true;
        });

        sidebar.on('mouseout', function() {
            barScroll = false;
        });

        $(window).on('scroll', function(e) {
            if (!barScroll) {
                var activeItem = $('.docs-sidebar li.active a');
                if (activeItem.length) {
                    if (!activeMenu || (activeMenu.attr('href') != activeItem.attr('href'))) {
                        activeMenu = activeItem;
                        var top = activeMenu.offset().top - sidebar.offset().top;
                        if (top < 0) {
                            sidebar.scrollTop(sidebar.scrollTop() + top);
                        } else if (top > winHeight - 30) {
                            sidebar.scrollTop(sidebar.scrollTop() + top - winHeight + 30);
                        }
                    }
                }
            }
        });
    });
</script>
</body>
</html>
